<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="/"/>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="css/uploadifive.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-4 col-md-offset-8">
            <button type="button" class="btn btn-primary" id="to-add">添加</button>
            <button type="button" class="btn btn-danger" id="delBatch">删除</button>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-hover">
                <tbody>
                    <tr>
                        <td><input type="checkbox" id="checkAll"></td>
                        <td>ID</td>
                        <td>商品分类</td>
                        <td>名称</td>
                        <td>价格</td>
                        <td>图片</td>
                        <td>操作</td>
                    </tr>
                    <tr th:each="product:${page.list}">
                        <td><input type="checkbox" class="cxs" th:value="${product.id}"></td>
                        <td th:text="${product.id}"></td>
                        <td th:text="${product.typeName}"></td>
                        <td th:text="${product.name}"></td>
                        <td th:text="${product.price}"></td>
                        <td>
                            <img src="#" th:src="${product.images}" style="width: 100px;height: 100px">
                        </td>
                        <td>
                            <button type="button" class="btn btn-primary toUpdate" th:id="${product.id}">修改</button>
                            <button type="button" class="btn btn-danger delById"  th:id="${product.id}">删除</button>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <div class="row">
        <div class="col-md-6 ">
            当前在"<span th:text="${page.pageNum}"></span>"页&nbsp;&nbsp;
            共有"<span th:text="${page.total}"></span>"条记录&nbsp;&nbsp;
            共"<span th:text="${page.pages}"></span>"页
        </div>
        <div class="col-md-6 "><nav aria-label="Page navigation">
            <ul class="pagination">
                <li>
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li th:each="pageNum : ${page.navigatepageNums}" th:class="${pageNum == page.pageNum ? 'active':''}">
                    <a href="#" th:href="|product/page/${pageNum}/${page.pageSize}|" th:text="${pageNum}">1</a>
                </li>
                <li>
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
        </div>
    </div>
</div>
<!--添加层-->
<div class="modal fade" tabindex="-1" role="dialog" id="addModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="product/add" method="post" id="addForm">
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="name" placeholder="写相关规则" name="product.name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="price" class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="price" name="product.price">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="salePrice" class="col-sm-2 control-label">促销价</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="salePrice" name="product.salePrice">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="images" class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-10">
                            <input id="file_upload" type="file" name="file_upload" />
                            <img src="#" id="showImage" style="height: 100px;width: 100px;display: none"/>
                            <input type="hidden"  id="images" name="product.images">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="salePoint" class="col-sm-2 control-label">卖点</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="salePoint" name="product.salePoint">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="type_id" class="col-sm-2 control-label">商品类别</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="type_id" value="1" name="product.typeId">
                            <input type="text" class="form-control" id="type_name" value="电子数码" name="product.typeName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="productDescEditor" class="col-sm-2 control-label">商品描述</label>
                        <div class="col-sm-10" id="productDescEditor">
                            <input type="hidden" name="productDesc" id="productDesc"/>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="add">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<!--修改层-->
<div class="modal fade" tabindex="-1" role="dialog" id="updateModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Modal title</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" action="product/update" method="post" id="updateForm">
                    <input type="hidden" id="update_id" name="product.id" />
                    <div class="form-group">
                        <label for="name" class="col-sm-2 control-label">商品名称</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="update_name" name="product.name">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="price" class="col-sm-2 control-label">价格</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="update_price" name="product.price">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="salePrice" class="col-sm-2 control-label">促销价</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="update_salePrice" name="product.salePrice">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="images" class="col-sm-2 control-label">图片</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="update_images" name="product.images">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="salePoint" class="col-sm-2 control-label">卖点</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="update_salePoint" name="product.salePoint">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="type_id" class="col-sm-2 control-label">商品类别</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="update_type_id" value="1" name="product.typeId">
                            <input type="text" class="form-control" id="update_type_name" value="电子数码" name="product.typeName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="productDesc" class="col-sm-2 control-label">商品描述</label>
                        <div class="col-sm-10">
                            <textarea class="form-control" rows="3" id="update_productDesc" name="productDesc"></textarea>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="update">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script src="js/jquery.uploadifive.js" type="text/javascript"></script>


<script type="text/javascript" src=" https://unpkg.com/wangeditor@3.1.1/release/wangEditor.min.js"></script>

<script type="text/javascript">
    $(function () {
        $(function() {
            $('#file_upload').uploadifive({
                'buttonText'   : '上传',
                'fileObjName'   : 'file',
                'uploadScript' : 'file/upload',

                'onUploadComplete' : function(file, data) {
                    alert('The file ' + file.name + ' uploaded successfully.');
                    var result = JSON.parse(data);
                    $("#showImage").attr("src",result.data);
                    $("#showImage").show();
                    $("#images").val(result.data);
                }
            });
        });
        //给添加按钮绑定事件
        $("#to-add").click(function () {
            //弹出层
            $('#addModal').modal({
                backdrop:"static",
                keyboard:false
            })
        });


        $("#add").click(function () {
            //
            var context = editor.txt.html();
            $("#productDesc").val(context);
            $("#addForm").submit();
        })

        $(".delById").click(function(){
            debugger;
            var id = $(this).attr("id");
            $.ajax({
                url:"product/delById/"+id,
                success:function(data) {
                    if(data>0){
                        location.href="product/page/1/1";
                    }
                }
            })
        })

        $(".toUpdate").click(function(){
            debugger;
            var id = $(this).attr("id");
            $.ajax({
                url:"product/toUpdate/"+id,
                success:function(data){
                    debugger;
                    $("#update_id").val(data.product.id);
                    $("#update_name").val(data.product.name);
                    $("#update_price").val(data.product.price);
                    $("#update_salePrice").val(data.product.salePrice);
                    $("#update_salePoint").val(data.product.salePoint);
                    $("#update_images").val(data.product.images);
                    $("#update_type_id").val(data.product.typeId);
                    $("#update_type_name").val(data.product.typeName);
                    $("#update_productDesc").val(data.productDesc);

                        $("#updateModal").modal({
                            backdrop:"static",
                            keyboard:false
                        })

                }
            })
        })

        $("#update").click(function(){
            $("#updateForm").submit();
        })

        $("#checkAll").click(function () {
            $(".cxs").prop("checked",$(this).prop("checked"));
        });

        $(".cxs").click(function () {
            $("#checkAll").prop("checked",$(".cxs").length == $(".cxs:checked").length);
        })

        $("#delBatch").click(function () {
            //1.获取到被选中的复选框
            var delIds = $(".cxs:checked");
            var ids = [];
            //2.遍历赋值
            for (var i=0;i<delIds.length;i++){
                ids.push(delIds[i].value);
            }
            //3.发送请求
            if(confirm("是否确定批量删除？删除之后，数据不可恢复！")){
                $.ajax({
                    type: "POST",
                    url: "product/delByIds",
                    data: "ids="+ids,
                    success : function (data) {
                        if(data.statusCode == 200){
                            alert("批量删除成功！");
                            location.href = "product/page/1/1";
                        }
                    }
                })
            }
        });
        //初始化富文本框
        var E = window.wangEditor;
        var editor = new E('#productDescEditor');
        // 配置服务器端地址
        editor.customConfig.uploadImgServer = '/file/batchUpload';
        editor.customConfig.uploadFileName = 'files';
        // 将图片大小限制为 3M
        editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
        // 自定义菜单配置
        editor.customConfig.menus = [
            'head',  // 标题
            'bold',  // 粗体
            'fontSize',  // 字号
            'fontName',  // 字体
            'foreColor',  // 文字颜色
            'backColor',  // 背景颜色
            'justify',  // 对齐方式
            'emoticon',  // 表情
            'image',  // 插入图片
            'video',  // 插入视频
            'code',  // 插入代码
            'undo',  // 撤销
            'redo'  // 重复
        ]
        editor.create();

    })


</script>

</body>
</html>